<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$mount</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <div id="root">
        <h1>v-model: 只能适用于表单类元素：value上的绑定。</h1>
        <hr>
        单向绑定：<input type="text" :value="msg.message">
        <hr>
        双向绑定：<input type="text" v-model:value="msg.message">
        <hr>
        <h2>v-model简写</h2>
        双向绑定：<input type="text" v-model="msg.message">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // const vue = 
        const vm = new Vue({
        //   el: "#root",
        // data的函数式写法。
        //    data() {
        //        return {
        //            message:  "create by vue"
        //        }
        //    },
            data:{
                msg:{
                    message: "$mount"
                },
                url:"https://www.baidu.com/"
            }
        }); // vm
        console.log(vm)
        setTimeout(() => {
            // 相对灵活，5s后关联root；
            vm.$mount("#root")    
        }, 5000);
        
    </script>
</body>
</html>